<template>
	<van-popup :show="popupVisible" round style="width: 100%;">
		<div class="pad10 flex-between showMultipleButton">
			<van-button plain size="normal" @click="cancelSelection">取消</van-button>
			<div class="bold">
				{{ label }}
			</div>
			<van-button plain type="primary" size="normal" @click="confirmSelection">确定</van-button>
		</div>
		<van-field left-icon="search" v-model.trim="searchKeyword" clearable placeholder="请输入搜索关键字"></van-field>
		<div class="checkbox-style">
			<van-checkbox-group v-model="checkedValue">
				<van-cell-group>
					<van-cell v-for="(item, index) in filteredColumns" :key="index" :title="item.text" clickable @click="toggle(index)">
						<template #right-icon>
							<van-checkbox shape="square" :name="item" :ref="(el) => (checkboxRefs[index] = el)" @click.stop />
						</template>
					</van-cell>
				</van-cell-group>
			</van-checkbox-group>
		</div>
	</van-popup>
</template>

<script setup lang="ts">
	import {
		ref,
		onBeforeUpdate,
		computed,
		defineExpose
	} from "vue";

	const props = defineProps({
		options: {
			type: Array,
			required: true,
		},
		modelValue: {
			type: Array,
			default: () => [],
		},
		label: String,
		name: String,
		popupVisible:Boolean
	});
	
	const emit = defineEmits(["update:modelValue","selected"]);

	const searchKeyword = ref(null);
	const checkboxRefs = ref([]);
	const checkedValue = ref([]);

	const toggle = (index:number) => {
		checkboxRefs.value[index].toggle();
	};
	onBeforeUpdate(() => {
		checkboxRefs.value = [];
	});

	// 确定
	const confirmSelection = () => {
		//emit("update:modelValue", checkedValue.value);
		emit("selected",checkedValue.value)
	};
	// 弹出层搜索框
	const filteredColumns = computed(() => {
		return props.options.filter((item:any) => {
			return item.text.includes(searchKeyword.value);
		});
	});
	
</script>

<style scoped>
	.popup-style {
		height: 21.25rem;
	}

	.showMultipleButton {
		padding-bottom: 0;
	}

	.showMultipleButton .van-button {
		border: 0;
	}

	.flex-between {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bold {
		font-weight: bold;
		color: #444;
	}

	.checkbox-style {
		height: 420px;
		overflow-y: auto;
	}
</style>